<template>
  <!-- 版本详情 -->
  <el-drawer title="服务版本详情" v-model="visible" :direction="direction" :size="800" :before-close="beforeClose">
    <section style="margin-top: -40px">
      <div class="container">
        <h4 class="divider">基本信息</h4>
        <ul class="base-list">
          <li>
            <div class="li-inner">
              <span> 服务中文名称</span>
              <p :title="baseDetail.svc.svcName">
                {{ baseDetail.svc.svcName }}
              </p>
            </div>
          </li>
          <li>
            <div class="li-inner">
              <span> 方法名称</span>
              <p :title="baseDetail.svc.svcUrl">{{ baseDetail.svc.svcUrl }}</p>
            </div>
          </li>
          <li>
            <div class="li-inner">
              <span> 所属应用</span>
              <p :title="baseDetail.svc.appName">
                {{ baseDetail.svc.appName }}
              </p>
            </div>
          </li>
          <li>
            <div class="li-inner">
              <span>服务调用超时（ms）</span>
              <p :title="baseDetail.svc.callTimeout">
                {{ baseDetail.svc.callTimeout }}
              </p>
            </div>
          </li>
          <li>
            <div class="li-inner">
              <span> 当前版本</span>
              <p>
                {{
                    FindArrey(
                      baseDetail.svc.versionList,
                      "versionId",
                      "versionNum",
                      baseDetail.svc.currentVersionId
                    )
                }}
              </p>
            </div>
          </li>
          <li>
            <div class="li-inner">
              <span> 备注</span>
              <p :title="baseDetail.svc.memo">{{ baseDetail.svc.memo }}</p>
            </div>
          </li>
        </ul>
        <h4 class="divider">服务入参配置</h4>
        <el-table :data="baseDetail.inParamsList" style="width: 100%">
          <el-table-column prop="paramName" label="参数名称" width="180" />
          <el-table-column prop="paramNameCn" label="中文名称" width="180" />
          <el-table-column prop="type" label="类型" width="180" />
          <el-table-column prop="defaultValue" label="默认值" />
        </el-table>
        <h4 class="divider">接口配置</h4>
        <ul class="base-list" v-if="baseDetail.ifType == 'HTTP'">
          <li>
            <div class="li-inner">
              <span>数据源</span>
              <p :title="FindArrey(srcOptions, 'id', 'srcName', typeHttp.srcId)">
                {{ FindArrey(srcOptions, "id", "srcName", typeHttp.srcId) }}
              </p>
            </div>
          </li>
          <li>
            <div class="li-inner">
              <span>接口URL</span>
              <p :title="typeHttp.ifUrl">{{ typeHttp.ifUrl }}</p>
            </div>
          </li>
          <li>
            <div class="li-inner">
              <span>调用超时</span>
              <p :title="typeHttp.callTimeout">
                {{ typeHttp.callTimeout }}ms
              </p>
            </div>
          </li>
          <li>
            <div class="li-inner">
              <span>支持格式</span>
              <p :title="typeHttp.inParamsFormat">
                {{ typeHttp.inParamsFormat }}
              </p>
            </div>
          </li>
          <li>
            <div class="li-inner">
              <span>接口请求方式</span>
              <p :title="typeHttp.httpMethod">{{ typeHttp.httpMethod }}</p>
            </div>
          </li>
        </ul>
        <ul class="base-list" v-if="baseDetail.ifType == 'DB'">
          <li class="w100">
            <span> 数据源名称</span>
            <p :title="FindArrey(srcOptions, 'id', 'srcName', typeDb.srcId)">
              {{ FindArrey(srcOptions, "id", "srcName", typeDb.srcId) }}
            </p>
          </li>
          <li class="w100">
            <span>SQL语句 </span>
            <p :title="typeDb.sqlStmt">{{ typeDb.sqlStmt }}</p>
          </li>
        </ul>
        <ul class="base-list" v-if="baseDetail.ifType == 'JAR'">
          <li class="w100">
            <span>类名称</span>
            <p>{{ typeJar.classFullName }}</p>
          </li>
          <li class="w100">
            <span>jar 文件地址</span>
            <p>{{ typeJar.jarFile }}</p>
          </li>
        </ul>
      </div>
      <div class="export-api">
        <el-button type="primary" @click="exportApi">导出接口</el-button>
      </div>
    </section>
  </el-drawer>
</template>
<script>
import {
  defineComponent,
  watch,
  computed,
  ref,
  toRaw,
  onMounted,
  reactive,
} from "vue";
import useEditDrawer from "@/hooks/useEditDrawer";
import { detailService, versionService } from "@/api/service";
import { arrToStr, FindArrey, downloadTXT } from "@/utils/index.js";
import { getDataSourcePageList, getNodePageList } from "@/api/adaptation";
export default defineComponent({
  name: "DetailDialog",
  emits: ["update:modelValue", "update-list"],
  props: {
    modelValue: {
      type: Boolean,
      default: false,
    },
    detailInfo: {
      type: Object,
      default: {},
    },
    id: {
      type: String,
      default: "",
    },
    mode: {
      type: String,
      default: "",
    },
  },
  setup(props, { emit }) {
    const {
      visible,
      direction,
      loading,
      ruleForm,
      ruleFormRef,
      close,
      submit,
      beforeClose,
    } = useEditDrawer({
      emit,
      type: props.type,
      props,
    });
    let baseDetail = ref({
      inParamsList: [],
      versionId: "",
      svc: { versionList: [] },
      ifParam: {
        adptIfCfgDb: {},
        adptIfCfgHttp: {},
        adptIfCfgJar: {},
      },
      outParamsList: [],
      ifType: "",
    });
    let typeDb = ref({});
    let typeHttp = ref({});
    let typeJar = ref({});
    let srcOptions = ref([]);
    const getDetail = async (id, versionId) => {
      let res = {};
      // console.log(!!props.mode);
      if (props.mode) {
        res = await versionService(versionId);
      } else {
        res = await detailService(id, versionId);
      }
      res.data.ifParam = res.data.ifParam || {};
      res.data.inParamsList = res.data.inParamsList || [];
      res.data.outParamsList = res.data.outParamsList || [];
      baseDetail.value = res.data;
      typeDb.value = res.data.ifParam.adptIfCfgDb || {};
      typeHttp.value = res.data.ifParam.adptIfCfgHttp || {};
      typeJar.value = res.data.ifParam.adptIfCfgJar || {};
    };
    const srcList = async () => {
      let res = await getDataSourcePageList({ page: 1, size: 99999 });
      srcOptions.value = res.data.list;
      // console.log(srcOptions.value);
    };
    let nodeList = ref([]);
    const getSvcNodeList = async () => {
      let res = await getNodePageList({ page: 1, size: 99999 });
      nodeList.value = res.data.list;
      // console.log(res.data.list);
    };
    // 导出接口
    const exportApi = () => {
      console.log(baseDetail.value);
      let baseSvc = baseDetail.value.svc;
      let inParamsStr = "";
      baseDetail.value.inParamsList.map((it) => {
        inParamsStr += `|${it.paramName}|${it.paramNameCn}|${it.type}|\n`;
      });
      let outParamsStr = "";
      baseDetail.value.outParamsList.map((it) => {
        outParamsStr += `|${it.paramName}|${it.paramNameCn}|${it.paramType}|${it.required}|\n`;
      });
      let str = `
# 基本信息
|参数名称|参数值|
|--|--|
|服务中文名称|${baseSvc.appName}|
|MethodsName|${baseSvc.svcUrl}|
|服务调用超时|${baseSvc.callTimeout}|
|描述|${baseSvc.memo}|

# 服务入参

|参数名称|中文名称|类型|
|--|--|--|
${inParamsStr}

# 服务出参

|参数名称|中文名称|类型|是否必须|
|--|--|--|--|
${outParamsStr}
      `;
      downloadTXT("接口文档.md", str);
    };

    onMounted(async () => {
      srcList();
      getSvcNodeList();
      // getDetail();
    });
    watch(
      () => props.detailInfo,
      async (newValue, oldValue) => {
        // console.log(newValue);
        getDetail(newValue.id, newValue.versionId);
        // console.log("newValueId", newValue);
        // let res = await detailService(newValue.id, newValue.versionId);
        // //直接监听
        // baseDetail.value = res.data;
        // console.log("baseDetail", baseDetail.value);
      },
      { deep: true }
    );
    return {
      loading,
      visible,
      direction,
      ruleFormRef,
      ruleForm,
      close,
      submit,
      beforeClose,
      baseDetail,
      arrToStr,
      typeDb,
      typeHttp,
      typeJar,
      FindArrey,
      srcOptions,
      exportApi,
    };
  },
});
</script>

<style lang="scss" scoped>
ul.base-list {
  overflow: hidden;

  li {
    width: 50%;
    display: inline-block;
    line-height: 30px;
    margin-bottom: 10px;
    padding: 0 10px;

    &:nth-of-type(odd) {
      border-right: solid 1px #ebeef5;
    }

    .li-inner {
      padding: 0 5px;

      p {
        border-bottom: solid 1px #ebeef5;
      }
    }

    &.w100 {
      width: 100%;
    }

    p {
      min-height: 30px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    span {
      width: 160px;
      display: block;
      color: #666;
      font-weight: normal;
      // padding-left: 10px;
    }
  }
}

.desc {
  padding: 10px 0;
}

.export-api {
  border-top: solid 1px #ebeef5;
  padding: 10px 0;
  margin-top: 20px;
}
</style>
<style>
</style>
